<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible="questionsDialogVisibleShow"
      @close="closeQuestionsDialog"
      width="70%"
      @open="getQuestionsItemList"
    >
      <div class="el-row-one">
        <el-row>
          <el-col :span="6">
            <div>【题型】：{{ ItemList.questionType }}</div>
          </el-col>
          <el-col :span="6">
            <div>【编号】：{{ ItemList.id }}</div>
          </el-col>
          <el-col :span="6">
            <div>【难度】：{{ ItemList.difficulty }}</div>
          </el-col>
          <el-col :span="6">
            <div>【标签】：{{ ItemList.tags }}</div>
          </el-col>
        </el-row>
      </div>
      <div class="el-row-one">
        <el-row>
          <el-col :span="6">
            <div>【学科】：{{ ItemList.subjectName }}</div>
          </el-col>
          <el-col :span="6">
            <div>【目录】：{{ ItemList.directoryName }}</div>
          </el-col>
          <el-col :span="6">
            <div>【方向】：{{ ItemList.direction }}</div>
          </el-col>
        </el-row>
      </div>
      <hr />
      <!-- 简答题 -->
      <div class="el-row-one" v-if="ItemList.questionType === '3'">
        <div style="margin-top: 15px">【题干】：</div>
        <div class="question-stem" v-html="ItemList.question"></div>
        <hr />
      </div>
      <!-- 单选 -->
      <div class="el-row-three" v-if="ItemList.questionType === '1'">
        <div>【题干】：</div>
        <div class="question-stem" v-html="ItemList&&ItemList.question"></div>
        <div style="margin-top: 15px">
          单选题 选项：（以下选中的选项为正确答案）
        </div>
        <div style="margin-top: 15px">
          <el-radio-group v-model="radio">
            <div v-for="item in ItemList.options" :key="item.id">
              <el-radio :label="item.isRight">{{ item.title }}</el-radio>
            </div>
          </el-radio-group>
        </div>
        <hr />
      </div>
      <!-- 多选 -->
      <div class="el-row-one" v-if="ItemList.questionType === '2'">
        <div style="margin-top: 15px">【题干】：</div>
        <div class="question-stem" v-html="ItemList.question"></div>
        <div style="margin-top: 15px">
          多选题 选项：（以下选中的选项为正确答案）
        </div>
        <div style="margin-top: 15px">
          <!-- <div> -->
          <el-checkbox
            v-for="item in ItemList.options"
            :key="item.id"
            :value="item.isRight ? true : false"
            >{{ item.title }}</el-checkbox
          >
          <!-- </div> -->
        </div>
        <hr />
      </div>

      <div class="el-row-one">
        【参考答案】：
        <el-button type="danger" @click="openVideo">视频答案预览</el-button>
        <div v-if="showVideo">
          <meta name="referrer" content="never" />
          <video
            class="question-video"
            :src="ItemList.videoURL"
            controls
          ></video>
        </div>
      </div>
      <hr />
      <div class="el-row-one question-detail">
        <span>【答案解析】：</span><span v-html="ItemList.answer"></span>
      </div>
      <hr />
      <div class="el-row-two">【题目备注】：{{ ItemList.remarks }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeQuestionsDialog"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { questionsDetailApi } from '@/api/hmmm/questions.js' // 题库详情
export default {
  data () {
    return {
      Answer: 2,
      showVideo: false,
      videoSrc: 'https://www.bilibili.com/video/BV14J411P7Tx?share_source=copy_web&vd_source=d388695cc7982173735c35de8b51e75f',
      ItemList: [], // 所有数据
      radio: 1, // 单选框
      checkList: [] // 多选框
    }
  },
  props: {
    questionsDialogVisibleShow: {
      type: Boolean,
      default: false
    },
    questionsPreviewId: {
      type: [Number, String],
      required: true
    }

  },
  methods: {
    // 发送接口
    async getQuestionsItemList () {
      try {
        const { data } = await questionsDetailApi({ id: this.questionsPreviewId })
        this.ItemList = data
      } catch (error) {
        this.ItemList = {
          questionType: '1',
          id: 34,
          difficulty: '2',
          tags: '青玉案',
          subjectName: '前端',
          directoryName: 'ERN',
          direction: '企业服务',
          question: '<p>东风夜放花千树<p>',
          options: [
            { code: 'D', id: 148, img: '', isRight: 0, questionsID: 33, title: '更吹落,星如雨' },
            { code: 'C', id: 147, img: '', isRight: 0, questionsID: 33, title: '宝马雕车香满路' },
            { code: 'B', id: 146, img: '', isRight: 0, questionsID: 33, title: '蛾儿雪柳黄金缕' },
            { code: 'A', id: 145, img: '', isRight: 1, questionsID: 33, title: '笑语盈盈暗香去' }
          ],
          videoURL: 'http://vfx.mtime.cn/Video/2021/07/10/mp4/210710122716702150.mp4',
          answer: '<p>众里寻他千百度，蓦然回首，那人却在，灯火阑珊处<p>',
          remarks: '233333'
        }
      }
    },
    // 关闭弹窗
    closeQuestionsDialog () {
      this.$emit('update:questionsDialogVisibleShow', false)
      // console.log(this.questionsPreviewNum)
    },
    changeCheck (item) {
      if (item.isRight) {
        console.log(item.isRight)
      } else {
        item.isRight = true
      }
    },
    // 视频显现隐藏
    openVideo () {
      this.showVideo = !this.showVideo
    }
  }

}

</script>

<style scoped lang='scss'>
// .container {
//   width: 500px !important;
// }
.el-row-one {
  margin: 20px 0;
}
.el-row-two {
  margin-top: 20px;
}
.el-row-three {
  margin-top: 20px;
}
::v-deep .el-radio,
.el-checkbox {
  display: block;
  margin-bottom: 15px;
}
.question-stem {
  color: #0000ff;
  margin-top: 15px;
  margin-bottom: 15px;
}
.question-detail {
  span {
    display: inline-block;
  }
}
.question-video {
  width: 400px;
}
</style>
